import React, { Suspense } from "react"
import { TabBar } from 'antd-mobile';
import { connect } from "react-redux"

const Home = React.lazy(() => import("@/pages/Home"))
const Cart = React.lazy(() => import("@/pages/Cart"))
const Menu = React.lazy(() => import("@/pages/Menu"))
const Mine = React.lazy(() => import("../../pages/Mine"))
const OrderList = React.lazy(() => import("../../pages/OrderList"))

const mapState = (state) => {
    return {
        state
    }
}

const mapDispatch = (dispatch) => {
    return {}
}
@connect(mapState, mapDispatch)
class Tab extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'redTab',
            hidden: false,
            fullScreen: true,
        };
    }

    // renderContent(pageText) {
    //     <Suspense fallback={<h1>正在加载</h1>}>
    //         {() => Home}
    //     </Suspense>
    // }

    render() {
        return (
            <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="首页"
                        key="shouye"
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(' + require("../../assets/icons/home0.png").default + ') center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(' + require("../../assets/icons/home1.png").default + ') center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selected={this.state.selectedTab === 'blueTab'}
                        badge={999}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'blueTab',
                            });
                        }}
                        data-seed="logId"
                    >
                        {
                            <Suspense fallback={<h1>正在加载</h1>}>
                                <Home />
                            </Suspense>
                        }
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require("../../assets/icons/cup0.png").default + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require("../../assets/icons/cup1.png").default + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="菜单"
                        key="caidan"
                        badge={'new'}
                        selected={this.state.selectedTab === 'redTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'redTab',
                            });
                        }}
                        data-seed="logId1"
                    >
                        {
                            <Suspense fallback={<h1>正在加载</h1>}>
                                <Menu />
                            </Suspense>
                        }
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require("../../assets/icons/order0.png").default + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require("../../assets/icons/order1.png").default + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="订单"
                        key="dindan"
                        dot
                        selected={this.state.selectedTab === 'greenTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'greenTab',
                            });
                        }}
                    >
                        {
                            <Suspense fallback={<h1>正在加载</h1>}>
                                <OrderList />
                            </Suspense>
                        }
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require("../../assets/icons/cart0.png").default + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require("../../assets/icons/cart1.png").default + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="购物车"
                        key="gouwuche"
                        dot
                        selected={this.state.selectedTab === 'PinkTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'PinkTab',
                            });
                        }}
                    >
                        {
                            <Suspense fallback={<h1>正在加载</h1>}>
                                <Cart />
                            </Suspense>
                        }
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require("../../assets/icons/mine0.png").default + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require("../../assets/icons/mine1.png").default + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="我的"
                        key="wode"
                        dot
                        selected={this.state.selectedTab === 'BlackTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'BlackTab',
                            });
                        }}
                    >
                        {
                            <Suspense fallback={<h1>正在加载</h1>}>
                                <Mine />
                            </Suspense>
                        }
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}

export default Tab 
